<template>
    <div class="item-container" :class="{ completed: todo.completed }">
      <input
        type="checkbox"
        :checked="todo.completed"
        @change="$emit('toggle', todo.id)"
        class="todo-checkbox"
      />
      <span class="todo-text">{{ todo.text }}</span>
      <div class="action-buttons">
        <button @click="$emit('edit', todo)" class="edit-btn">✏️</button>
        <button @click="$emit('remove', todo.id)" class="delete-btn">🗑️</button>
      </div>
    </div>
  </template>

<script>
export default {
  name: 'TodoItem',
  props: {
    todo: {
      type: Object,
      required: true
    }
  }
}
</script>
  
  <script setup>
  defineProps({
    todo: {
      type: Object,
      required: true
    }
  })
  
  defineEmits(['toggle', 'edit', 'remove'])
  </script>
  
  <style scoped>
  .item-container {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #f9f9f9;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
  
  .item-container:hover {
    background: #f0f0f0;
  }
  
  .todo-checkbox {
    margin-right: 1rem;
    transform: scale(1.2);
  }
  
  .todo-text {
    flex: 1;
    margin-right: 1rem;
    word-break: break-word;
  }
  
  .completed .todo-text {
    text-decoration: line-through;
    color: #888;
  }
  
  .action-buttons button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    margin-left: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s;
  }
  
  .action-buttons button:hover {
    opacity: 1;
  }
  
  .edit-btn { color: #f0ad4e; }
  .delete-btn { color: #d9534f; }
  </style>